<template>
    <div id="carlist">
        <p class="title">匹配车辆</p>
        <div class="car-wrapper">
            <div class="car-item car-red-border">
                <div class="car-item-info">
                    <div class="car-detail">
                        <span class="car-num">苏E68pz9</span>
                        <i>|</i>
                        <span class="car-type">宝马 X6</span>
                        <span class="car-color"></span>
                    </div>
                    <div class="car-target">
                        到<span>月亮湾</span>
                    </div>
                    <div class="car-status car-red">
                        正在停靠
                    </div>
                </div>
                <div class="car-item-img">
                    <img src="//pic5.40017.cn/02/000/13/18/rBLkCVkeUNuARam9AABAANHBFMI194.jpg" alt="">
                    <p class="car-user-name">哈哈</p>
                </div>
            </div>
        </div>
    </div>
</template>
<script>
export default {
    name:'carlist',
    data () {
        return {
            
        }
    }
}
</script>
<style scoped>
#carlist{
    width: 90%;
    height: auto;
}
#carlist .title{
    font-size: 14px;
    color: #999;
    margin-bottom: 20px;
}
.car-wrapper{
    width: 100%;
}
.car-wrapper .car-item{
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    background-color: #fff;
    padding: 10px 15px;
    font-size: 14px;
    color: #999;
}
.car-detail .car-num{
    font-weight: bolder;
    color: #000;
}
.car-detail .car-color{
    width: 10px;
    height: 10px;
    background-color: #000;
    display: inline-block;
}
.car-target,.car-status{
    text-align: left;
}
.car-target{
    padding-bottom: 20px;
}
.car-target span{
    color: #ff6c00;
}
.car-red{
    color: red;
}
.car-red-border{
    border-bottom: 1px solid red;
}
.car-yellow{
    color: #ff6c00;
}
.car-yellow-border{
    border-bottom: 1px solid #ff6c00;
}
.car-item-img img{
    width: 40px;
    height: 40px;
    border-radius: 50px;
    overflow: hidden;
}
.car-item-img .car-user-name{
    font-size: 14px;
    color: #999;
}
</style>
